<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
	<link rel="stylesheet" href="/MeituanPR/lib/reset.css" />
	<script type="text/javascript">
		<!--修改HTML根元素单位为rem-->
		(function () {
			var docEL = document.documentElement;
			function setRemUnit() {
				//获取rem基准值
				var rem = docEL.clientWidth/10;

				//动态设置HTML根元素的fontsize
				docEL.style.fontSize = rem + 'px';
			}
			setRemUnit();
			//窗口大小变化时触发
			window.addEventListener('resize',setRemUnit);

			//窗口出现在当前屏幕时(有浏览器兼容性)
			window.addEventListener('pageshow',function (e) {
				if (e.persisted){
					setRemUnit();
				}
			})
		})();
	</script>
	<style type="text/css">
		.content{
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: dodgerblue;
			position: fixed;
			display: flex;
			flex-direction: row;
		}
		.bottom{
			position: fixed;
			width: 100%;
			bottom: 0;
		}
		.shop-bar{
			background-color: black;
			width: 100%;
			bottom: 0;

			display: flex;
			flex-direction: row;
		}
		.shop-bar .shop-icon{
			background-image: url("img/shop-icon.png");
			width: 1.466667rem;
			height: 1.466667rem;
			border-radius: 50%;
			background-size: cover;
			position: relative;
			bottom: 0.4rem;
			z-index: 999;
		}

		.shop-bar .shop-icon .num{
			background-color: red;
			border-radius: 50%;
			height: 0.5rem;
			width: 0.5rem;
			position: absolute;
			color: #fff;
			font-size: 0.2rem;
			text-align: center;
			line-height: 0.5rem;
			left: 1.2rem;
		}

		.shop-bar .shop-fee{
			font-size: 0.533333rem;
			color: #fff;
			margin-top: 0.24rem;
			margin-left: 0.24rem;
		}
		.shop-bar .payment{
			background-color: #ffd161;
			width: 2.93rem;
			font-size: 0.426667rem;
			text-align: center;
			position: absolute;
			right: 0;
			height: 100%;
			line-height: 1.4rem;

		}

		.shop-bar .shop-fee .send-fee{
			font-size: 0.4rem;
			color: #999;
		}

		.panel{
			background-color: #f4f4f4;
			height: 0.8rem;
			width: 100%;
			z-index: 99;
			font-size: 0.12rem;
			line-height: 0.8rem;
			text-align: right;
			position: relative;
		}
		.panel .clear{
			padding-right: 0.3rem;
		}

		.panel .clear::before{
			content: '';
			display: inline-block;
			background-image: url("img/clear.jpeg");
			width: 0.4rem;
			height: 0.4rem;
			background-size: cover;
			right: 1.88rem;
			top: 0.25rem;
			position: absolute;
		}
		.mask{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(0,0,0,0.5);
		}

		.a{
			display: none;
		}

	</style>
</head>
<body>
<div class="content">
	<div class="left" style="width: 50%;height: 21.333rem;background-color: green;"></div>
	<div class="right" style="width: 50%;height: 21.333rem;background-color: yellow;"></div>
</div>
<div class="mask a"></div>
<div class="bottom">
	<div class="panel a">
		<div class="clear">清空购物车</div>
	</div>
	<div class="shop-bar">
		<div class="shop-icon">
			<div class="num">0</div>
		</div>
		<div class="shop-fee">
			<div class="total-fee">¥99</div>
			<div class="send-fee">¥9</div>
		</div>
		<div class="payment">去结算</div>
	</div>
</div>
<script type="text/javascript" src="/MeituanPR/lib/jquery.min.js"></script>
<script type="text/javascript">
	(function () {
		function addEvent() {
			$('.shop-bar').on('click','.shop-icon',function () {
				$('.mask').toggle();
				$('.panel').toggle();
			})
		}

		addEvent();
	})();
</script>
</body>
</html>